<template>
  <div class="upstreamDownstreamManagement">

    <van-sticky>
      <van-nav-bar :title="title" left-arrow
                   @click-left="backMinePage">
        <template #right>
          <van-icon style="margin-right: 20px;" name="search" size="20"
                    @click="searchBoxShow = !searchBoxShow; toClearKeyWord(!!searchParams.keyword)"
          />
          <van-icon name="ellipsis" size="18" @click="showOverlay = true" />
        </template>
      </van-nav-bar>

      <van-search
        v-show="searchBoxShow"
        v-model="searchParams.keyword"
        placeholder="请输入企业名、报名人姓名、职位名搜索"
        show-action
        shape="round"
        @search="onSearch"
        @clear="toClearKeyWord"
      >
        <div slot="action" @click="onSearch">搜索</div>
      </van-search>
    </van-sticky>

<!--    <com-filter-menu
      :rightOptionObj="rightOptionObj"
      :rightOption="rightOption"
      :rightValue="rightValue"
      @getFilterMenuValue="toGetFilterMenuValue_recruitmentManagement"
    ></com-filter-menu>-->


    <van-overlay :show="showOverlay" @click="showOverlay = false" class-name="over_layer">
      <van-cell-group class="layer">
        <van-cell
          v-for="(item, index) in navList"
          :key="index"
          :value="item.text"
          @click="goNav(item.id)"
          :icon="item.icon"
        />
      </van-cell-group>
    </van-overlay>

    <div class="jobArr">
      <job-item-for-recruit
        v-for="(item, index) in needObj"
        :key="index"
        :jobItem="item"
        :searchType="1"
        :downstream="false"
        :keyWord="'invitationsIssued'"
        :type="2"
        :transmitStr="transmitStr"
        :title="title"
      ></job-item-for-recruit>
      <van-pagination
        v-show="total > 0"
        style="margin: 10px 0"
        v-model="searchParams.pageIndex"
        :total-items="total"
        :items-per-page="searchParams.pageSize"
        @change="handlePaginationChange"
      >
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </div>

    <!--<nut-drag direction="y" :style="{right:'0px', top:'66%'}" class="quick_links">
      <nut-fixednav
        :nav-list="navList" @selected="selected" class="quick_links_detail"
        active-text="收起" un-active-text="导航"
      ></nut-fixednav>
    </nut-drag>-->
  </div>
</template>

<script>
import jobItemForRecruit from "../recruitmentManagement/common/jobItemForRecruit";
import comFilterMenu from '../../../components/comFilterMenu'
import {Toast} from "vant";
import {navList_upDown} from "../recruitmentManagement/common/comConstant";

export default {
  name: 'getApplyCost',

  components: {
    comFilterMenu,
    jobItemForRecruit,
  },

  data() {
    return {
      total: 0, // 总记录数
      transmitStr: '转发前的招聘信息',
      showOverlay: false,
      rightValue: '-1',
      // eslint-disable-next-line no-undef
      rightOptionObj: {},

      title: '收到的合作费',
      rightOption: [
        {text: '全部', value: '-1'},
        {text: '未授权', value: '0'},
        {text: '已授权', value: '1'},
        {text: '不授权', value: '2'}
      ],
      audit: '-1',
      navList: navList_upDown,
      needObj: {},

      // 检索参数
      searchParams: {
        keyword: '', // 搜索关键字
        pageIndex: 1, // 当前页
        pageSize: 10, // 每页显示条数
        audit: -1
      },
      searchBoxShow: false,
    }
  },
  created() {
    this._getJobList()
  },
  methods: {
    goNav(id) {
      if (id == 2) {
        this.$router.push({
          path: `/myCompany/invitationsIssued`
        })
      } else if (id == 1) {
        this.$router.push({
          path: `/myCompany/upstreamDownstreamManagement`
        })
      } else if (id == 3) {
        this.$router.push({
          path: `/myCompany/getApplyCost`
        })
      } else if (id == 4) {
        this.$router.push({
          path: `/myCompany/sendApplyCost`
        })
      } else if (id == 5) {
        this.$router.push({
          path: `/myCompany/myBlackList`
        })
      }
    },
    toGetFilterMenuValue_recruitmentManagement(val) {
      console.log('传值---读不读', val)
      this.searchParams.audit = val
      this._getJobList()
    },
    handlePaginationChange(pageIndex) {
      this.searchParams.pageIndex = pageIndex
      this._getJobList()
    },
    async _getJobList() {
      const comMesRes = await this.$api.job.getApplication({...this.searchParams, type: 'CooperationFee'});
      this.needObj = comMesRes.data.items
      this.total = comMesRes.data.count
    },
    goNeedPage_upstreamDown(val) {
      const keyWord = 'upstreamDownstreamManagement'
      if (val === 'search') {
        this.$router.push({
          path: `/searchRecords/${keyWord}`
        })
      }
    },
    selected($event) {
      console.log('当前点击', $event.item)
    },

    onSearch() {
      this.searchParams.pageIndex = 1
      if(this.searchParams.keyword.trim()){
        this._getJobList();
      } else {
        Toast('请先输入！');
      }
    },

    toClearKeyWord(isQuery = true){
      if(!isQuery){
        return null
      }
      this.searchParams.keyword = '';
      this.searchParams.pageIndex = 1
      this.$nextTick(() => {
        this._getJobList()
      })
    },

    backMinePage(){
      localStorage.removeItem('tabItemIndex_myCompany');
      this.$router.push('/mine');
    },
  }
}
</script>

<style lang="scss" scoped>
.upstreamDownstreamManagement {
  width: 100%;

  .over_layer {
    margin-top: 46px;
    height: 100%;

    .layer {
      width: 40%;
      font-size: 14px;
      position: absolute;
      right: 0;
      z-index: 2;
    }
  }

  /deep/ .quick_links {
    .nut-fixednav.active .fixed-list {
      right: 0;
    }

    .quick_links_detail {
      .fixed-list {
        right: -110%;

        li {
          min-width: 1.6rem;

          img {
            /*display: none;*/
          }

          span {
            /*border: 1px solid blue;*/
          }
        }
      }
    }
  }
}
</style>
